import React, { useEffect, useState, useRef } from 'react';
import { backgroundObj, toast, loginData } from '@/utils/utils'
import Tabs from '@/components/Tabs'
import { View, Text } from '@tarojs/components'
import { fetchtListUserGoods } from '@/server/order';
import { fetchCheckMiniProgramUpdate } from '@/server/shop';
import Taro, { getCurrentInstance, useReachBottom, useDidShow } from '@tarojs/taro'
import Router from '@/utils/router'
import EmptyComponents from '@/components/EmptyComponents';
import './index.scss';

const Course = (props) => {
  const { params } = getCurrentInstance().router
  const { type = 'live' } = params
  const { organizationId = '' } = loginData() || {}
  const [data, setData] = useState([])
  const [page, setPage] = useState({
    page: 1,
    limit: 10
  })

  const [check, setCheck] = useState('0')
  useDidShow(() => {
    Taro.setNavigationBarTitle({
      title: type === 'live' ? '我的课程' : '我的商品'
    })
  })
  const liveTabs = [{
    label: '单场直播',
    value: 'directLive',
    show: check !== '1'
  }, {
    label: '点播课程',
    value: 'videoCourse'
  }, {
    label: '直播课程',
    value: 'liveCourse'
  },]
  const shopTabs = [{
    label: '周边商品',
    value: 'offline'
  },
  {
    label: '面授商品',
    value: 'faceToFace'
  },
  {
    label: '服务商品',
    value: 'service'
  },
  ]
  const [activeKey, setActiveKey] = useState(type === 'live' ? 'directLive' : 'offline')
  const [tabs, setTabs] = useState(type === 'live' ? liveTabs : shopTabs)
  useEffect(() => {
    fetchData()
  }, [page])
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })

  const CourseCard = (props) => {
    const { data } = props
    const { goodsName, price, cover, priceType = 'free', id, goodsType, liveStatus } = data
    return <View className='CourseCard_box' onClick={() => {
      if (goodsType === 'videoCourse' || goodsType === 'video' || goodsType === 'liveCourse' || goodsType === 'service') {
        Router('payShopDetail', {
          args: { goodsId: id }
        })
      } else if (goodsType === 'offline' || goodsType === 'directLive') {
        Router('shopDetail', {
          args: { goodsId: id }
        })
      }

    }}>
      <View className='CourseCard_profile' style={backgroundObj(cover.split(','))}></View>
      <View className='CourseCard_content'>
        <View className='CourseCard_title font_noHide'>{goodsName}</View>
        {liveStatus === '1' && <View className='CourseCard_btn1'>直播中</View>}
        {liveStatus === '2' && <View className='CourseCard_btn'>查看回放</View>}
        {/* <View className='CourseCard_price'>{priceType === 'free' ? '免费' : '￥' + price}</View> */}
      </View>
    </View>
  }
  const fetchData = () => {
    fetchtListUserGoods({ organizationId, ...page, goodsType: activeKey }).then(val => {
      const { userGoodsList } = val
      setData([...data, ...userGoodsList])
    })
  }
  return (
    <View className='Course_box'>
      <Tabs onChange={(e) => {
        setActiveKey(() => {
          setPage({
            ...page,
            page: 1
          })
          setData([])
          return e
        })
      }} list={tabs} active={activeKey} activeKey={activeKey}>
      </Tabs>
      <EmptyComponents list={data}>
        <View className='Course_data_info'>
          {data.map((item, index) => {
            return <CourseCard key={index} data={item}></CourseCard>
          })}
        </View>
      </EmptyComponents>

    </View >
  )
}
export default Course
